<template>
  <div class="hello">
    <div v-for="(item,index) in goodstop10" :key="index">
      <van-row>
        <van-col span="1"></van-col>
        <van-col span="8">
          <van-image width="120px" height="120px"  fit="cover" :src="item.goodsPic"/>
        </van-col>
        <van-col span="14">
          <div class="bottomSeparater" style="height:120px">
            <div class="goodsName" >{{item.goodsName}}</div>
            <div class="goodsDesc">{{item.goodsDesc}}</div>
            <div class="goodsTag">
              <van-tag round color="#ffe1e1" text-color="#ad0000" size="medium">
                {{item. goodsTag}}
              </van-tag>
            </div>
            <div style="height:20px ">
              <span>￥</span>
              <span class="goodsPrice">{{item. goodsOriginprice*item.goodsSale}}</span>
              <span class="orginPrice"><del>￥{{item. goodsOriginprice}}</del></span>
              <span class="addBtn" @click="addCart(item. goodsId)">
                <van-button icon="plus" type="primary" size="mini"/>
              </span>
            </div>
          </div>
        </van-col>
        <van-col span="1"></van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsList',
  props: {
    goodstop10: {
      required: true,
      type: Array,
      default() {
        return [{
          goodsDesc: "",
          goodsId: 1,
          goodsName: "羽绒服温馨洗",
          goodsOriginprice: 50,
          goodsSale: 1,
          goodsTag: "超值优惠",
          goodsType: 1,
          goodsPic: "http://r8uara5jv.hn-bkt.clouddn.com/%E9%A9%BF%E7%AB%99/clothes.jpg"
          }]
      }
    }
  },
  data () {
    return {
    }
  },
  methods:{
    addCart:function(id){
      this.$axios
      .get("/order/cartadd?goodsId="+id)
      .then(res)
      .catch(error)
    }
  }
}
</script>

<style scoped>
.bottomSeparater{
  border-bottom: #8f8f8f 1px solid;
}
.goodsName{
  font-weight: 800;
  font-size:16px;
  height: 40px;
}
.goodsDesc{
  font-size: 12px;
  color:#8f8f8f ;
  height:32px
}
.goodsTag{
  height:16px;
  margin-bottom: 2px;
}
.goodsPrice{
  font-size: 16px;
  color:#f15717;
}
.orginPrice{
  color:silver;
  font-size:12px
}
.addBtn{
  float:right;
}
</style>
